<template>
    <div id="app">
        <eHeader :opt="headOption" :title="defaultTitle" :needBack="showBack"/>
        <div :class="showBack?'app-main no-footer':'app-main'">
            <transition :name="'vux-pop-' + (direction === 0 ? 'in' : 'out')">
                <router-view class="router" v-touch:swiperight="handleTouch"/>
            </transition>
        </div>
        <div class="app-footer" v-if="!showBack">
            <md-tab-bar v-model="activeTab" :items="items" ref="tabbar" :has-ink="false" @change="changeTab">
                <template slot="item" slot-scope="{ item }">
                    <div class="custom-item">
                        <div class="icon">
                            <md-icon :name="item.icon" />
                        </div>
                        <div class="text">
                            <span v-text="item.label"></span>
                        </div>
                    </div>
                </template>
            </md-tab-bar>
        </div>
    </div>
</template>

<script lang="ts">
import eHeader from "@/components/eHeader/index.vue";
import { Vue, Component, Watch } from "vue-property-decorator";
import { DirectionType, AppModule } from '@/store/modules/app'

@Component({
    components: { eHeader }
})
export default class App extends Vue {
    private transitionName: string = "slide-right";
    private headOption: any = {
        title: "首页",
        shadow: true
    };
    private items: Array<any> = [
        { name: 1, label: "首页", icon: "home", path:"/" },
        { name: 2, label: "我的", icon: "user", path:"/demo" }
    ];

    get direction(){
        return AppModule.direction;
    }

    get defaultTitle(){
        return AppModule.defaultTitle;
    }

    get showBack(){
        return AppModule.showBack;
    }
    // set defaultTitle(val){
    //      AppModule.ToggleTitle(val);
    // }

    get activeTab(){
        return AppModule.activeTab;
    }
    set activeTab(val){
         AppModule.ToggleTabbar(val);
    }

    changeTab(item: any, index: number, prevIndex: number){
        this.$router.push({
            path: item.path
        })
    }

    handleTouch(e: any){
        this.$router.go(-1)
    }
}
</script>

<style lang="scss">
    @import './styles/app';
</style>
